<template>
  <div class="message-box">
    <p class="none" v-if="list.length === 0">暂无消息......</p>
    <div v-for="(item, index) in list" :key="index" class="message-list">
      <div class="list-head">
        <img
          class="avatar"
          v-if="item.touxiang && item.touxiang.length"
          :src="item.touxiang[0].filePath"
          alt=""
        />
        <div class="avatar no-img" v-else></div>
        <span class="name">{{ item.nicheng }}</span>
        <span class="phone">{{ item.shoujihao }}</span>
        <span class="date">{{ item.createTime }}</span>
      </div>
      <div class="list-bottom">
        <div class="text">{{ item.neirong }}</div>
      </div>
      <p style="margin-top: 20px">留言对象：{{ item.duixiang }}</p>
    </div>
    <h-page
      v-if="total"
      v-model:curr-page="params.current"
      :size="params.size"
      :total="total"
      @change="GetList"
    />
  </div>
</template>
<script setup>
import { reactive, ref, watch } from "vue";
import { GetMessageList } from "@/api/message";
import { useRoute } from "vue-router";

const route = useRoute();
const list = ref([]);
const total = ref(0);
const params = reactive({
  current: Number(route.query.page) || 1,
  size: Number(route.query.size) || 10,
});
const GetList = () => {
  GetMessageList(params).then((res) => {
    if (res.code == 4201) {
      list.value = res.data.records;
      total.value = res.data.total;
    }
  });
};
watch(
  () => route.query,
  () => {
    params.current = Number(route.query.page) || 1;
    GetList();
  },
  { deep: true }
);
GetList();
</script>
<style lang="scss" scoped>
.message-box {
  padding: 1px 30px;
  .message-list {
    margin: 30px 0;
    padding-bottom: 20px;
    border-bottom: 1px solid #e4e4e4;
    .list-head {
      display: flex;
      align-content: center;
      .avatar {
        width: 60px;
        height: 60px;
        border-radius: 50%;
        &.no-img {
          background-color: #f2f2f2;
        }
      }
      span {
        line-height: 60px;
        &.name {
          color: #259ed6;
          font-size: 16px;
          font-weight: bold;
          margin-left: 20px;
        }
        &.phone {
          margin-left: 30px;
          color: #333;
        }
        &.date {
          margin-left: 40px;
          color: #ccc;
        }
      }
    }
    .list-bottom {
      margin-top: 20px;
      color: #333;
      .text {
        max-width: 100%;
        word-break: break-all;
        line-height: 20px;
      }
    }
  }
  .none {
    margin-top: 20px;
    font-size: 23px;
  }
}
</style>
